<template>
  <div>
    <div class="header">
      <div class="img-box" @click.stop="$router.go(-1)">
        <img src="@/../public/images/1671779704879.png" alt="" />
      </div>
      <div class="text">我的收藏</div>
      <nav class="nav">
        <div
          :class="active == 0 ? 'active' : ''"
          @click.stop="showListChange(0)"
        >
          岗位收藏
        </div>
        <div
          :class="active == 1 ? 'active' : ''"
          @click.stop="showListChange(1)"
        >
          公司收藏
        </div>
      </nav>
    </div>
    <div class="collection-list" v-if="active==0">
      <div class="item" v-for="(listItem, index) in list" :key="index">
        <JobComponent :listItem="listItem" :isJobDetail="true" />
      </div>
    </div>
    <div class="collection-list" v-else>
      <div class="item" v-for="(item, index) in list" :key="index">
        <CompanyComponent :item="item"/>
      </div>
    </div>
  </div>
</template>

<script>
import JobComponent from "@/components/JobComponent.vue";
import CompanyComponent from "@/components/CompanyComponent.vue";
export default {
  name: "CollectView",
  components: {
    JobComponent,
    CompanyComponent
  },
  data: () => {
    return {
      list: [],
      active: 0,
    };
  },
  methods: {
    //切换列表
    showListChange(val) {
      if(this.active==val)return;
      localStorage.setItem("collectActive",val);
      if (val == 0) {
        this.getJobListHandler();
      }else{
        this.getCompanyListHandler();
      }
    },
    //获取岗位列表数据
    getJobListHandler() {
      this.axios({
        method: "post",
        url: "/v1/company/company-work-fav-list",
        headers: {
          Authorization: "Bearer " + localStorage.getItem("token"),
        },
      }).then((res) => {
        console.log(res);
        this.active = 0;
        if (res.data.statusCode == 200) {
          this.list = res.data.data.result;
          console.log(this.list);
        } else this.$toast("获取信息失败");
      });
    },
    //获取公司列表数据
    getCompanyListHandler() {
      this.axios({
        method: "post",
        url: "/v1/company/company-fav-list",
        headers: {
          Authorization: "Bearer " + localStorage.getItem("token"),
        },
      }).then((res) => {
        this.active = 1;
        if (res.data.statusCode == 200) {
          this.list = res.data.data.result;
          console.log(this.list);
        } else this.$toast("获取信息失败");
      });
    },
  },
  created() {
    this.active = Number.parseInt(localStorage.getItem("collectActive")?localStorage.getItem("collectActive"):0);
    this.active==0?this.getJobListHandler():this.getCompanyListHandler();
  },
};
</script>

<style lang="scss" scoped>
.header {
  position: relative;
  width: 100%;
  height: 1.8rem;
  background-color: #149639;
  background-image: url(@/../public/images/1671787342920.png);
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0.3rem;
  padding-bottom: 0.5rem;
  .img-box {
    width: 0.15rem;
    height: 0.28rem;
    min-width: 0.15rem;
  }
  .text {
    flex-grow: 1;
    font-size: 0.36rem;
    font-weight: bold;
    color: #ffffff;
  }
  .nav {
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    height: 0.8rem;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    > div {
      position: relative;
      flex: 1;
      height: 0.5rem;
      font-size: 0.3rem;
      color: #ffffff;
      opacity: 0.7;
    }
    .active {
      opacity: 1;
      &::after {
        position: absolute;
        width: 0.3rem;
        height: 0.04rem;
        background-color: #fff;
        content: "";
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0 auto;
      }
    }
  }
}
.collection-list {
  .item {
    width: 6.9rem;
    background: #ffffff;
    box-shadow: 0px 0.06rem 0.21rem 0px rgba(20, 150, 57, 0.22);
    border-radius: 0.2rem;
    margin: 0.3rem auto;
  }
}
</style>